<template>
  <div class="wy-main business-car">
      <a-row class="wy-main-title">
           <a-col :span="24">
               <p class="title-p">
                   <a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >发布农产品采购信息</span>
					<a-divider class="title-divider"  />
               </p>
           </a-col>
       </a-row>
      <a-form :form="form" @submit="handleSubmit" class="wy-form">
          <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="农产品采购主题">
				<a-input  :disabled='disabled' class="wy-input" v-decorator="[ 'subject', {rules: [{ required: true , message: '请输入农产品采购主题!'}]}]"   maxLength="50" placeholder="请输入农产品采购主题" />
		  </a-form-item>

          <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="农产品类型">
				<a-select  :disabled='disabled' v-decorator="[ 'type', {rules: [{ required: true, message: '请选择农产品类型!' }]} ]" style="width: 280px;" placeholder="请选择农产品类型">
          <a-select-option v-for="(itme,index) in agriList" :key="index" :value="itme.dictKey">
            {{itme.dictValue}}
          </a-select-option>
				</a-select>
		  </a-form-item>

            <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="农产品名称">
				<a-input  :disabled='disabled' class="wy-input" v-decorator="[ 'name', {rules: [{ required: true , message: '请输入农产品名称!'}]}]"  placeholder='请输入农产品名称' maxLength="50" />
		    </a-form-item>

            <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="产地">
				<a-input  :disabled='disabled' @click="departureShowMap" v-decorator="[ 'producePlace', {rules: [{ required: true, message: '请选择农产品产地!' }]}]" placeholder='请选择农产品产地' ref="userNameInput">
					<a-icon type="environment" slot="suffix" style="color: #15837A;" />
				</a-input>
			</a-form-item>
	

            <a-form-item class="wy-form-item " :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="采购价格">
				<a-input  :disabled="disabled"  placeholder='请输入采购价格'  style="width: 175px" v-decorator="[ 'price', {rules: [{ required: true, message: '请输入采购价格!' }]}]" />
				<a-select  v-decorator="[ 'priceUnit', {rules: [{ required: true, message: '请选择农产品产地!' }]}]" style="width: 95px; margin-left:10px" class="gongjin">
          <a-select-option v-for="(itme,index) in priceList" :key="index" :value="itme.dictKey">
            {{itme.dictValue}}
          </a-select-option>
        </a-select>
			</a-form-item>
            <a-form-item class="wy-form-item " :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="采购数量">
				<a-input  :disabled="disabled"  placeholder='请输入采购数量'  style="width: 175px" v-decorator="[ 'number', {rules: [{ required: true, message: '请输入采购数量!' }]}]" />
				<a-select  v-decorator="[ 'numberUnit', {rules: [{ required: true, message: '请选择农产品产地!' }]}]" style="width: 95px; margin-left:10px" class="gongjin">
                 <a-select-option v-for="(itme,index) in numList" :key="index" :value="itme.dictKey">
                    {{itme.dictValue}}
                  </a-select-option>
                </a-select>
			</a-form-item>
           
      
   
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="采购说明" >
				<a-textarea  :disabled='disabled' placeholder="请填写说明" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" v-decorator="[ 'description', {rules: [{ required: true, message: '请填写说明!' }]}]" />
			</a-form-item>
            <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="有效期" style="margin-top: 26px">
				<a-input v-decorator="[ 'validityTerm', {rules: [{ required: true, message: '请输入有效期!' }]}]"  :disabled='disabled' placeholder='请输入有效期' /><b style="margin-left: 5px;">（天）</b>
			</a-form-item>
            <a-divider class="title-divider"  />
      <div class="route_choice wy-form-item">
      <p><b>联系方式</b></p>
          <a-form-item class="wy-form-item " :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="联系人">
              <a-input readOnly :disabled="disabled"  placeholder='请输入联系人'   style="width: 175px"  v-model="users.username"/>
              <span style="margin-left:25px; margin-right:10px;"> 联系人手机号：</span><a-input readOnly  placeholder='请输入联系人手机号' :disabled="disabled"  v-model="users.mobile" />
          </a-form-item>
          <a-form-item class="wy-form-item " :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="邮箱">
              <a-input readOnly  :disabled="disabled"  placeholder='请输入邮箱'  style="width: 175px" v-model="users.email" />
              <span style="margin-left:75px; margin-right:10px;"> QQ号：</span><a-input readOnly :disabled="disabled" v-model="users.qq" placeholder='请输入qq号码' />
          </a-form-item>
          <a-form-item class="wy-form-item " :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="详细地址">
              <a-input readOnly :disabled="disabled" style="width:592px"  v-model="users.address"  placeholder='请输入详细地址' />
          </a-form-item>
      </div>
            <a-divider class="title-divider"  />
			<!--我已阅读-->
			<div class="ant-row ant-form-item"  v-if='types!="add"'>
			  <div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-checkbox v-model="agreement" >
								我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
							</a-checkbox>
						</span>
					</div>
				</div>
			</div>

	  <div class="ant-row ant-form-item" v-if='types!="add"'>
			<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-button type="primary" :disabled = '!agreement' html-type="submit" style="width: 300px;height:50px;margin-top: -10px;" >
								{{types == 'add' ? '关闭':'提交审核并发布'}}
							</a-button>
						</span>
					</div>
				</div>
	  </div>
      </a-form>

		<map-svg ref="mapSvgDialog" @change="mapSvgCall" ></map-svg>

	  <a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<web @close="close" v-if="webShow" @cancel="close"></web>
	  </a-modal>
	  <a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<user @close="close" v-if="userShow" @cancel="close"></user>
	  </a-modal>
	 
  </div>

    
</template>
<script>
import MapSvg from '@/components/dialog/MapSvg'
import { mapState } from 'vuex'
import Web from '@/components/tool/web'
import User from '@/components/tool/user'
export default {
    components: {
        MapSvg,
		Web,
		User
    },
    props: ['datail','types','isSee'],
    data(){
        return {
			disabled:false,
			agreement:false,
			webShow:false,
      userShow:false,
      users:{},
      remarks:'',//备注
      agriList:[],
      priceList:[],
      numList:[],
			// 地图存起止数据
      departureData: {},
    }
	},
	created() {
    this.getType(28)
    this.getType(36)
    this.getType(1)
		if(this.isSee){
			this.disabled = true
		}else{
			this.disabled = false
		}
      this.users = this.$store.state.account.user;
    if(this.datail){
      let d = this.datail
      console.log(this.types)
    }
    },
    beforeCreate() {
		this.form = this.$form.createForm(this);
	},
      computed: {
    ...mapState(['setUser'])
    },
	methods: {
    // 获取字典类型
      getType(type){
        this.$get('/info/commonDict', {
          dictType: type
        }).then((r) => {
          if(type == 3){
            console.log(r)
          }
          switch(type){
            case 28: this.agriList = r.data.data.rows; break;
            case 36: 
            this.priceList = r.data.data.rows;
              setTimeout(()=>{
                this.form.setFieldsValue({
                  priceUnit:this.priceList[0].dictKey
                });
              },0) 
             break;
            case 1: 
            this.numList = r.data.data.rows;
              setTimeout(()=>{
                this.form.setFieldsValue({
                  minNumberUnit:this.numList[0].dictKey,
                  numberUnit:this.numList[0].dictKey
                });
              },0) 
             break;
          }
        })
      },
		close() {
			this.webShow = false
			this.userShow = false

		},
            /* 省市地图代码 start */
			// 省市地图回调
			mapSvgCall(d) {
				if(d.name === 'departure') {
					this.form.setFieldsValue({
						producePlace : d.provCityArea
					});
					this.departureData = Object.assign({}, d);
				}
			},
      departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
      },
        // 认证提交
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {
          if(!err) {
         
           
            if (this.types === 'edit') {
              this.editSubmit(values)
            }else{
              this.addSubmit(values)
            }
          }
        });
      },
      // 添加保存数据
      addSubmit(values){
        this.$post('/info/agriculturePurchase', values,true).then((r) => {
          console.log(r,8989)
          if(r.status == 200){
            this.$message.success(r.data.message)
            this.form.resetFields();
            this.agreement = false;
          }
          this.loading = false;
        }).catch((e) => {
          console.log(e)
          this.$message.error(e)
          this.loading = false;
        })
      },
      // 编辑修改数据
      editSubmit(values){
        values.driverId = this.datail.driverId;
        this.$put('info/infoDriver', values,true).then((r) => {
          console.log(r,8989)
          if(r.status == 200){
            this.$message.success(r.data.message)
            this.$emit('close');
          }
        }).catch((e) => {
          console.log(e)
          this.$message.error(e)
        })
      },
            
		   },		

	      }



</script>
<style lang="less">
		.car-label {
			margin-top: 10px;
			span {
				border: 1px solid #15837A;
				width: 100px;
				height: 40px;
				border-radius: 2px;
				text-align: center;
				line-height: 36px;
				font-size: 14px;
				display: inline-block;
				margin-right: 30px;
				margin-bottom: 20px;
			}
			.active {
				background: #15837A;
				color: #fff;
			}
			.span:first-child {
				margin-left: 0;
			}
			span,
			span:hover {
				cursor: pointer;
			}
        }
        .gongjin{
            .ant-select-selection{
            width:90px !important;
        }
        .ant-select-selection-selected-value{
            padding-right:0px;
        }

        }
        .route_choice {
      
        
	    margin-top: 10px;
	   
		padding-bottom: 10px;
        width:90% ;
        p{
            margin-left: 85px;
        }
		b{
			color: #333333;
			font-size: 16px;
		}
		width: 100%;
        }
        .time{
			.ant-calendar-picker{
				width:120px !important;;
				
					.ant-calendar-picker-input{
						width:120px !important;;
					}
					.ant-input{
						width:120px !important;;
					}
			
			}
           .wy-form .ant-form-item .ant-input{
			   width:120px !important; 
		   }
		}
		.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
		
	
        


</style>


